<script setup>
import { reactive, watch } from "vue";
const data = reactive({
  form: {
    title: "",
    date: "",
  },
  arr: JSON.parse(localStorage.getItem("todo") || "[]"),
  selected: -1,
});
watch(
  //为什么这里要用箭头函数,而不是直接写watch(data.arr,() => {})?
  //如果直接写watch(data.arr,() => {}),那么watch()方法就会监听data.arr这个变量的变化,而不是data.arr的值的变化
  () => data.arr,
  (newVal) => {
    localStorage.setItem("todo", JSON.stringify(newVal));
  },
  {
    //深度监听
    deep: true,
  }
);
// 提交事件
const onSubmit = () => {
  if (!data.form.title || !data.form.date) {
    alert("请按照要求填写表单");
    return;
  } else if (data.selected === -1) {
    data.arr.push({ id: Date.now(), ...data.form });
  } else {
    data.arr[data.selected] = { ...data.arr[data.selected], ...data.form }; 
    // 为什么这里要用...data.arr[data.selected]? 因为我们要把data.arr[data.selected]中的数据展开, 然后把data.form中的数据展开, 然后把展开的数据放到一个新的对象中, 然后把这个新的对象放到data.arr[data.selected]中  这样做的目的是为了保证data.arr[data.selected]中的数据不会被改变 如果不用...data.arr[data.selected], 那么data.arr[data.selected]中的数据就会被改变   
  }
  data.form = {
    title: "",
    date: "",
  };
  data.selected = -1;
};
// 编辑事件
const onEdit = (index) => {
  data.form = { ...data.arr[index] };
  data.selected = index;
};
//删除事件
const onDel = (id) => {
  data.arr = data.arr.filter((item) => item.id !== id);
};
// 拖拽事件
const onDragstart = (event, index) => {
  //setData()方法用于设置拖动数据，参数1为数据类型，参数2为数据
  //这里的text/plain表示拖动数据的类型为纯文本
  event.dataTransfer.setData("text/plain", index);
};
const onDragover = (event) => {
  //为什么这里要阻止默认事件?
  //不阻止就“放不下去”
  event.preventDefault();
};
const onDrag = (event, targetIndex) => {
  event.preventDefault();
  const dragIndex = parseInt(event.dataTransfer.getData("text/plain"));// 
  // 下面的[0]是什么意思     splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。这里的[0]是为了把返回的数组中的第一个元素取出来
  const item = data.arr.splice(dragIndex, 1)[0];
  data.arr.splice(targetIndex, 0, item);
};
</script>

<template>
  <h3>{{ data.selected === -1 ? "添加" : "编辑" }}</h3>
  <div>
    <div>
      <label for="title">
        标题：<input id="title" type="text" v-model="data.form.title" />
      </label>
      <label for="date">
        日期：<input id="date" type="date" v-model="data.form.date" />
      </label>
    </div>
    <p><button @click="onSubmit">提交</button></p>
    <p>
      <button
        @click="
          data.selected = -1;
          data.form.title = '';
          data.form.date = '';
        "
      >
        添加
      </button>
    </p>
    <div>
      <table
        border="1"  
        style="width: 500px; border-collapse: collapse; text-align: center"
      >
        <thead>
          <tr>
            <th>标题</th>
            <th>日期</th>
            <th>操作</th>
          </tr>
        </thead>

        <tbody>
          <tr
            v-for="(item, index) in data.arr"
            :key="item.id"
            draggable="true"
            @dragstart="onDragstart($event, index)"
            @dragover="onDragover"
            @drop="onDrag($event, index)"
          >
            <td>{{ item.title }}</td>
            <td>{{ item.date }}</td>
            <td>
              <button @click="onEdit(index)">编辑</button>
              <button @click="onDel(item.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>